<script setup lang="ts">
import { Cellphone } from '@element-plus/icons-vue'
import { ref } from 'vue'
const showPopover = ref(false)
function mouseenter() {
  showPopover.value = true
}

function mouseout() {
  showPopover.value = false
}
</script>

<template>
  <div class="box">
    <el-icon class="icon" size="30px"><Cellphone /></el-icon>
    <div class="popover" @mouseenter="mouseenter" @mouseleave="mouseout" :class="{ popoverShow: showPopover }">
      <Transition>
        <div class="popoverBox" v-if="showPopover">
          <div class="showBox">
            <div class="showBox-title">扫码即可下载手机APP</div>
            <img style="width: 100px; height: 100px" src="@/assets/APP.webp" alt="" srcset="" />
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>
<style scoped lang="less">
.showBox {
  text-align: center;
  font-size: 13px;

  &-title {
    white-space: nowrap;
    margin-bottom: 10px;
  }
}
.v-enter-active,
.v-leave-active {
  transition: 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.popover {
  // display: none;
  position: absolute;
  // top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  // right: 0;
  // margin-right: 95px;

  .popoverBox {
    background: rgba(0, 0, 0, 0.9);
    padding: 20px 10px;
    border-radius: 10px;
    margin-top: 20px;
    transform: translateX(-50%);
    width: 200px;

    &::before {
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-bottom: 10px solid rgba(0, 0, 0, 0.9);
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      position: absolute;
      top: -10px;
      right: 90px;
    }
  }

  &::after {
    display: block;
    content: '';
    position: absolute;
    top: -50px;
    left: -50%;
    // background: #f00;
    width: 40px;
    height: 70px;
    cursor: pointer;
  }
}
.icon {
  color: rgba(255, 255, 255, 0.5);

  &:hover {
    // color: rgb(1, 206, 205);
  }
}

.box {
  position: relative;
}
</style>
